<template>
  <div class="file-cont">
    <Headers
      v-model:lay-out="layOut"
      v-model:selectKeys="selectKeys"
      @change-dropdrow="changeDropDrow"
      @change-layout="changeLayOut"
    />
    <component :is="componentName" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import list from './components/list.vue';
  import grid from './components/grid.vue';

  import Headers from './components/header.vue';
  type LayOutType = 'list' | 'grid';

  const layOut = ref<LayOutType>('list');
  const selectKeys = ref(['1']);

  const ComponentObj = {
    list,
    grid,
  };

  let componentName = ComponentObj[layOut.value];

  const changeLayOut = (data) => {
    console.log('%cchangelayOut', 'color:#45a;font-size:30px;font-weight:bold', data);

    componentName = ComponentObj[data];
  };

  const changeDropDrow = () => {};
</script>

<style lang="less" scoped>
  .file-cont {
    padding: 16px 0;
    background: #fcfcfc;
    width: calc(100% - 32px);
    margin: auto;
    height: calc(100vh - 128px);
    border-radius: 4px;
  }
</style>
